<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>
    <style>
        .clock {
            width: 400px;
            margin: 100px auto;
            background: #ddd;
            border-radius: 20px;
        }
    </style>
</head>

<body>
<div class="clock">
    <canvas id="cont" height="400px" width="400px">浏览器不支持</canvas>
</div>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    // 定义基础变量
    const w = h = 400 // 时钟宽高
    const x = y = 200 // 时钟中心点坐标
    const r = 180 // 时钟半径
    const r_hour = 60 // 时针长度
    const r_minute = 120 // 分针长度
    const r_second = 140 // 秒针长度
    const r_text = 140 // 表盘文字半径
    const r_square = 165 // 刻度
    const r_circle = 10 // 表盘小圆点
    const deg = 2 * Math.PI
    // 0.平移中心点
    ctx.translate(w / 2, h / 2)

    showClick()
    setInterval(function () {
        showClick()
    }, 1000)

    function showClick() {
        // 1.画圆盘
        drawCircle(0, 0, r, 'white')

        // 2.画时钟的表针
        // 获取当前时间
        const date = new Date()
        const hour = date.getHours() * (deg / 12) - deg / 4
        const minute = date.getMinutes() * (deg / 60) - deg / 4
        const second = date.getSeconds() * (deg / 60) - deg / 4

        // drawLine(0, 0, r_hour, 0, '#000', 10)
        // drawLine(0, 0, r_minute, 0, '#000', 5)
        // drawLine(0, 0, r_second, 0, '#f00', 2)

        drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), '#000', 10)
        drawLine(0, 0, r_minute * Math.cos(minute), r_minute * Math.sin(minute), '#000', 5)
        drawLine(0, 0, r_second * Math.cos(second), r_second * Math.sin(second), '#f00', 2)


        //3.画表钉子
        drawCircle(0, 0, r_circle, '#000')

        // 4.画数字
        const sixPi = Math.PI / 6 // Math.PI * 2 /12
        for (let i = 1; i < 13; i++) {
            const tmpAngle = sixPi * i
            const textX = r_text * Math.sin(tmpAngle)
            const textY = -r_text * Math.cos(tmpAngle)
            drawText(i, textX, textY)
        }

        // 5.画刻度
        const thirtyPi = Math.PI / 30 // Math.PI * 2 /60
        for (let i = 1; i < 61; i++) {
            const tmpAngle = thirtyPi * i
            const x1 = r * Math.sin(tmpAngle)
            const y1 = -r * Math.cos(tmpAngle)

            let x2 = r_square * Math.sin(tmpAngle)
            let y2 = -r_square * Math.cos(tmpAngle)
            let nowColor = 'red'
            let nowWidth = 4
            // 判断是否为整点
            if (i % 5 !== 0) {
                x2 = (r_square + 4) * Math.sin(tmpAngle)
                y2 = -(r_square + 4) * Math.cos(tmpAngle)
                nowColor = '#aaa'
                nowWidth = 2
            }
            drawLine(x1, y1, x2, y2, nowColor, nowWidth)
        }
    }


    /**
     * 画实心小球
     * @param x
     * @param y
     * @param r
     * @param color
     */
    function drawCircle(x, y, r, color = '#000') {
        ctx.beginPath()
        ctx.arc(x, y, r, 0, Math.PI * 2)
        ctx.fillStyle = color
        ctx.fill()
    }

    /**
     * 画出直线方法
     * @param x1
     * @param y1
     * @param x2
     * @param y2
     * @param color
     * @param width
     */

    function drawLine(x1, y1, x2, y2, color, width = 2) {
        // 画图开始:开启一条路径
        ctx.beginPath()
        // 确定起始点
        ctx.moveTo(x1, y1)
        // 确定结束点
        ctx.lineTo(x2, y2)
        // 在着色之前设置颜色和线宽
        ctx.strokeStyle = color
        ctx.lineWidth = width
        // 设置圆角
        ctx.lineCap = 'round'
        // 着色
        ctx.stroke()
        // 结束路径可以不关闭
        ctx.closePath()
    }


    /**
     * 画文字
     * @param text
     * @param x
     * @param y
     */
    function drawText(text, x, y) {
        ctx.font = 'bold 26px 微软雅黑'
        ctx.fillStyle = '#000'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(text, x, y)
    }
</script>
</body>
</html>
